<template>
    <div class="block">
      <el-carousel :interval="3000" height="200px">
        <el-carousel-item v-for="(item, index) in bannerData" :key="index">
          <!-- 直接放置图片，并确保其填充容器 -->
          <img :src="item.imageUrl" class="carousel-image" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </template>

  <script setup>
  import { defineProps } from "vue";

  // 定义组件接收的 props
  // bannerData 应该是一个包含 { imageUrl: string } 对象的数组
  defineProps({
    bannerData: {
      type: Array,
      required: true, // 根据实际情况设置是否必需
      default: () => [], // 提供默认值
    },
  });

  // 在实际应用中，您可能会在这里或父组件中通过 API 调用获取 bannerData
  // 例如：
  // import { ref, onMounted } from 'vue';
  // const bannerData = ref([]);
  // onMounted(async () => {
  //   try {
  //     const response = await fetch('/api/banners/all'); // 假设您的API接口
  //     const result = await response.json();
  //     if (result.code === 1 && result.data) {
  //       bannerData.value = result.data;
  //     } else {
  //       console.error('获取轮播图数据失败:', result.msg);
  //     }
  //   } catch (error) {
  //     console.error('请求轮播图数据时发生错误:', error);
  //   }
  // });
  </script>

  <style scoped>
  /* 确保el-carousel-item占据其父容器的全部高度和宽度 */
  .el-carousel__item {
    height: 100%; /* 继承el-carousel的200px高度 */
    width: 100%; /* 确保宽度也填充 */
    display: flex; /* 使用flex布局使图片居中 */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 隐藏超出容器的部分 */
  }

  /* 为轮播图中的图片添加样式 */
  .carousel-image {
    width: 100%; /* 图片宽度填充其父容器 */
    height: 100%; /* 图片高度填充其父容器 */
    object-fit: cover; /* 保持图片宽高比，同时填充整个容器，可能会裁剪图片的一部分 */
    /* 如果您希望图片完整显示且不被裁剪（可能会出现空白），请使用 object-fit: contain; */
    /* object-fit: contain; */
  }

  /* 轮播图外部容器样式，使其在页面中居中并美观 (如果这个组件是直接放在页面中，可以保留) */
  /* 如果这个组件会被其他父组件包含，这些样式可能需要在父组件中定义 */
  .block {
    width: 100%; /* 组件宽度通常由父组件决定 */
    /* max-width: 800px; */ /* 如果需要最大宽度限制 */
    border-radius: 8px;
    overflow: hidden;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */ /* 阴影效果 */
  }
  </style>
